<template>
  <text
    class="iconfont icon-"
    :class="`icon-${name}`"
    :style="styleSheet"
    @tap="$emit('click')"
  />
</template>

<script setup>
import { computed, mergeProps } from "vue";
import "@/static/font/iconfont.css";
import { isNumber } from "lodash";

defineEmits(["click"]);
const props = defineProps({
  name: String,
  size: Number | String,
  color: String,
});

const styleSheet = computed(() => {
  const { color, size = "inherit" } = props;

  return {
    color,
    "font-size": isNumber(size) ? `${size}rpx` : size,
  };
});
</script>

<style>
m-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
